<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <!-- 准备容器 -->
    <canvas class="canvas" width="1200" height="400"></canvas>
    <script>
      // 获取画笔
      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");
      // 画线段
      context.beginPath(); // 防止连笔
      context.moveTo(100, 100); // 起始点
      context.lineTo(200, 150); // 到达点
      context.strokeStyle = "green"; // 修改样式
      context.stroke(); // 闭合，才能出现效果
      context.closePath();
      // 画矩形
      context.strokeRect(400, 100, 100, 100); // (x坐标,y坐标,width,height)
      // fill 填充
      context.fillStyle = "yellow"; // 修改样式
      context.fillRect(400, 200, 100, 100); // (x坐标,y坐标,width,height)
      // 画圆
      context.beginPath();
      context.arc(650, 150, 50, 0, Math.PI * 2, true); // (x, y, r, 起始角度, 结束角度, 是否顺时针绘画)
      context.stroke();
      context.closePath();
      // 画字
      context.font = "30px 宋体";
      context.strokeText("呵呵呵", 800, 100);
      // context.clearRect(0, 0, 1200, 400); // 进行下一次绘画，清空上一次绘画的内容
    </script>
  </body>
</html>
